<template>
	<div class="login">
		
		<div class="web-team-login-right-center">
			<label class="web-team-login-right-center-label">
				<span>账号:</span>
				<el-input v-model="data.email" @keypress.native.enter="loginClick" type="text" placeholder="请输入账号(邮箱)" />
			</label>
			<label class="web-team-login-right-center-label">
				<span>密码:</span>
				<el-input v-model="data.password" @keypress.native.enter="loginClick" type="password" placeholder="请输入密码"  />
			</label>
			<div class="forget-password">
				<el-checkbox v-model="data.checked">记住账号</el-checkbox>
				<router-link to="/forgetIndex">忘记密码?</router-link>
			</div>
			<el-button type="primary" @click="loginClick" :loading="loading">{{loginText}}</el-button>
			
		</div>
		<div class="web-team-login-right-register">
			<span>还没有账号？<router-link to="/register">去注册</router-link></span>
		</div>
	</div>
</template>

<script lang="ts" setup>
	import {ref,reactive} from 'vue'
	import { ElMessage} from 'element-plus'
	import {HttpLogin} from '../public/http'
	import { inject } from "vue";
	import { webServer } from "./main/webServer"
	const store = inject('store') as any
	const router = inject('router') as any
	
	let loading = ref(false)
	let loginText = ref("登录")
	
	let data = reactive({
		email:'',
		password:'',
		checked:false
	})
	if(store.state.userInfoX&&store.state.userInfoX.checked){
		data.checked = true
		data.email = store.state.userInfoX.account
	}
	if(store.state.userInfoX&&store.state.userInfoX.token){
		router.push('/community')
	}
	
	const loginClick = ()=>{
		if(!data.email){
			ElMessage({
			    message: '请输入账号!',
			    type: 'warning',
			})
		}else if(!data.password){
			ElMessage({
			    message: '请输入密码!',
			    type: 'warning',
			})
		}else{
			loginText.value = "登录中..."
			loading.value = true
			HttpLogin({
				email:data.email,
				password:data.password,
			}).then((res:any)=>{
				loginText.value = "登录"
				loading.value = false
				if(res.code === 200){
					if(data.checked){
						res.data['checked'] = true
					}
					store.commit('userInfoMain',JSON.stringify(res.data))
					store.commit('sockerMain',webServer(res.data['account']))
					ElMessage({
					    message: '恭喜您登录成功!',
					    type: 'success',
					})
					router.push('/community')
					return;
				}
				
				ElMessage({
				    message: res.message,
				    type: 'warning',
				})
			})
			
		}
	}
</script>

<style lang="scss">
	.login {
		width: 100%;
		height: 100%;
		padding: 30px 30px;
		box-sizing: border-box;
		vertical-align: top;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		h2 {
			text-align: center;
			font-size: 35px;
			letter-spacing: 1px;
		}

		.web-team-login-right-center {
			width: 100%;
			margin: 0 auto;
			display: flex;
			flex-direction: column;
			align-items: center;
			.web-team-login-right-center-label{
				display: block;
				width: 100%;
				height: 45px;
				border: 0;
				border-bottom: 1px solid #e5e5e5;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 20px;
				span{
					width: 65px;
					font-size: 16px;
					color: #383838;
				}
				input {
					width: calc(100% - 65px);
					height: 45px;
					color: #383838;
					border: 0;
				}
				&:nth-of-type(2){
					margin-bottom: 10px;
				}
			}
			

			button {
				width: 100%;
				height: 45px;
				margin: 0 auto;
				font-size: 18px;
				letter-spacing: 2px;
				color: white;
			}

			.forget-password {
				width: 100%;
				display: flex;
				justify-content: space-between;
				margin-bottom: 20px;
				.el-checkbox__label{
					color: #383838;
				}
				a {
					color: red;
					font-size: 14px;
					display: flex;
					align-items: center;
				}


			}
		}

		.web-team-login-right-register {
			margin-top: 30px;
			
			span{
				font-size: 14px;
			}
			a {
				color: #3a8ee6;
			}
		}

		.web-team-login-right-info {
			text-align: center;
			font-size: 15px;
			letter-spacing: 1px;
			margin-top: 30px;
		}

	}
</style>
